<template>
	<view class="container">
		<view v-for="(item, index) in list" :key="index" class="item"  @click="itemClick(item, index)">
			<image class="cover" :src="item.coverURL"></image>
			<view class="content">
				<u-checkbox shape="circle" class="checkbox" v-model="item.check"></u-checkbox >
				<view>{{item.title}}</view>
			</view>
		</view>
		
		<u-button class="action-view" @click="saveClick">保存</u-button>
	</view>
</template>

<script>
	import { getAlbumTemplates, getAlbumTemplatePage, createAlbumTemplate } from '@/api/album.js'
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				list: []
			}
		},
		...mapState({
			parentInfo: state => state.user.parentInfo,
		}),
		onLoad(options) {
			this.imgList = options.resURL.split(',')
			this.getList()
		},
		methods: {
			getList() {
				getAlbumTemplates().then(res => {
					console.log(res)
					this.list = res.data
					this.templateEntity = this.list[0]
				})
			},
			
			saveClick() {
				let flag = false
				let template = null
				for (let index in this.list) {
					let item = this.list[index];
					if (item.check) {
						flag = true
						template = item
					}
				}
				if (!flag) {
					this.$u.toast('请先选择模版')
					return
				}
				this.createAlbum(template)
			},
			
			itemClick(item, index){
				const check = item.check
				for (let index in this.list) {
					let item = this.list[index];
					item.check = false;
				}
				item.check = !check;
				this.list.splice(index, 1, item);
			},
			
			createAlbum(template) {
				// const imgList = [
				// 	"https://saas.res.dotflat.cn/teach/file/photo/2c98d81f87fa93ca0187fa94e9f20041/f35b64951057416ab73bf9ac94a1da43_1691656116318.png",
				// 	"https://saas.res.dotflat.cn/teach/file/photo/2c98d81f87fa93ca0187fa94e9f20041/f35b64951057416ab73bf9ac94a1da43_1691656109242.png",
				// 	"https://saas.res.dotflat.cn/teach/file/photo/2c98d81f87fa93ca0187fa94e9f20041/f35b64951057416ab73bf9ac94a1da43_1691656100584.png",
				// 	"https://saas.res.dotflat.cn/teach/file/photo/2c98d81f87fa93ca0187fa94e9f20041/f35b64951057416ab73bf9ac94a1da43_1691656116318.png",
				// 	"https://saas.res.dotflat.cn/teach/file/photo/2c98d81f87fa93ca0187fa94e9f20041/f35b64951057416ab73bf9ac94a1da43_1691656109242.png",
				// 	"https://saas.res.dotflat.cn/teach/file/photo/2c98d81f87fa93ca0187fa94e9f20041/f35b64951057416ab73bf9ac94a1da43_1691656100584.png",
				// 	"https://saas.res.dotflat.cn/teach/file/photo/2c98d81f87fa93ca0187fa94e9f20041/f35b64951057416ab73bf9ac94a1da43_1691656116318.png",
				// 	"https://saas.res.dotflat.cn/teach/file/photo/2c98d81f87fa93ca0187fa94e9f20041/f35b64951057416ab73bf9ac94a1da43_1691656109242.png",
				// 	"https://saas.res.dotflat.cn/teach/file/photo/2c98d81f87fa93ca0187fa94e9f20041/f35b64951057416ab73bf9ac94a1da43_1691656100584.png"
				// ]
				// console.log('test')
				
				let position = this.imgList.length - 1;
				let pagePosition = 0;
				let metas = []
				// const childrenId = this.parentInfo.defaultBabyId;
				
				uni.showLoading({})
				getAlbumTemplatePage(template.id).then(res => {
					console.log(res)
					const pageList = res.data
					let albumCreateEntity = {
						title: this.templateEntity.title,
						welcome: '欢迎',
						bgm: this.templateEntity.defaultBGM,
						bgmEnable: true,
						gender: '0',
						template: this.templateEntity.staticCode
					}
					
					while ( position >= 0 ){
						let pageEntity = pageList[pagePosition]
						let capacity = pageEntity.capacity
						if (capacity != -1 && capacity <= position + 1){
							
							let metasEntity = {
								content: '欢迎',
								title: pageEntity.title,
								layout: pageEntity.staticCode,
								autoDuration: pageEntity.autoDuration,
								animationIn: 'slide',
								animationOut: 'slide'
							}
							
							var list = []
							for (var i = 1; i <= capacity; i++){
							  list.push(this.imgList[position]);
							  position -= 1;
							  if (position < 0){
								break;
							  }
							}
							metasEntity.imgs = list;
							metas.push(metasEntity);
						}
						pagePosition = Math.round(Math.random()*(pageList.length - 1))
						console.log(pagePosition)
					}
					albumCreateEntity.metas=metas;
					console.log(albumCreateEntity)
					createAlbumTemplate({jsonStr: JSON.stringify(albumCreateEntity), childrenId: '2c98d81f8310efc8018310f4f4980014'}).then(res => {
						console.log(res)
						this.$u.route({
							url: '/pages_base/feed/album-template-complete',
							type: 'redirectTo',
							params: {
								name: res.data.name,
								staticURL: res.data.staticURL,
								childrenId: res.data.childrenId,
								id: res.data.id,
								
								cover: template.coverURL
							}
						})
					}).finally(o => {
						uni.hideLoading()
					})
				}).catch(e => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	.container{
		display: flex;
		flex-direction: column;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
	.item{
		background: #FAFAFA;
		border: 4rpx solid rgba(0,0,0,0.1);
		box-shadow: 0px 5rpx 0px 0px rgba(10,2,5,0.15);
		border-radius: 10rpx;
		padding: 15rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		
		.cover{
			width: 75rpx;
			height: 135rpx;
		}
		.content{
			flex: 1;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
		}
	}
	
	.action-view {
		margin-top: 60rpx;
		margin-bottom: 60rpx;
		width: 100%;
	}
</style>
